<template>
  <div class="counter-six-wrap">
    <div class="counter-item" v-for="(item,index) in counterList">
      <div class="name">
        <div class="name-inner">
          <span class="desc1">{{item.name}}</span>
          <span class="desc2">项目部</span>
        </div>
      </div>
      <div class="content">
        <div class="counter-val" v-for="(val,i)  in item.val">
          <DigitalTransform class="numbers" :value="val"  :interval="$vuex.state.globalConfig.ani?2000:0"></DigitalTransform>
          <span class="label">{{i==0?'平台数':'单井数'}}</span>
        </div>
      </div>
      <!-- <div class="name">{{item.name}} <span class="unit">({{item.unit}})</span></div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "blockCenter",
  mixins: [],
  //props: ['boxStyle'],
  data() {
    return {
      counterList:[
        {name:"靖边",val:[63,478],unit:"个"},
        {name:"陇东",val:[231,828],unit:"个"},
        {name:"靖安",val:[82,472],unit:"个"},
        {name:"姬塬",val:[147,827],unit:"个"},
        {name:"对外合作",val:[125,73],unit:"个"},
        {name:"乌审旗",val:[842,24],unit:"个"},
        
      ]
    };
  },
  computed: {},
  methods: {
    processRandomVal(){
      let randomVals=A("rd",{
        min:20,
        max:1000,
        length:2,
        group:6
      })
      A("tis",'counterRad',()=>{
        randomVals.forEach((item,i)=>{
          this.counterList[i].val=item;
        })
        this.processRandomVal();
      },10000)
    }
  },
  mounted() {
    this.processRandomVal()
  }
};
</script>
<style lang="less">
.confg(){
  &:nth-child(1){.bd(var(--auxilary-danger_BD));.bgc(var(--auxilary-danger_BG));
    .name{.bgc(var(--auxilary-danger_BG_light));.bdri(var(--auxilary-danger_BD_light)); .fc(var(--auxilary-danger_FC_light));}
    .content,.content .numbers{.fc(var(--auxilary-danger_FC)); }
  }
  &:nth-child(2){.bd(var(--auxilary-warning_BD));.bgc(var(--auxilary-warning_BG));
    .name{.bgc(var(--auxilary-warning_BG_light));.bdri(var(--auxilary-warning_BD_light)); .fc(var(--auxilary-warning_FC_light));}
    .content,.content .numbers{.fc(var(--auxilary-warning_FC)); }
  }
}

.counter-six-wrap{.poa; .fullbox; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows:repeat(2,1fr); grid-gap: 12px; 
  .counter-item{.bd(var(--button-bd_hov)); .bgc(var(--popup-bg)); padding:0 0 0 80px; position: relative;
    .name{.fc(var(--font-normal)); .bgc(var(--button-bd_hov)); font-size: 14px; .poa;  left:0; top:0; writing-mode: vertical-lr; width: 80px; height: 100%; line-height: 1.2; text-align: center;
      .name-inner{.absoluteCenter;
        span{display: block; white-space: nowrap;
          &.desc1{font-size: 14px;font-weight: bold;}
        }
      }
    }
    .content{.fc(var(--font-normal)); .poa; right:20px; left:100px; top:50%; .fixc("y"); display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows:repeat(1,1fr); grid-gap: 20px; 
      .counter-val{text-align: center;
        .numbers{font-size: 24px; .por; font-weight: bold;.ff("en5"); .fc(var(--font-normal));
          .plus{.fc(var(--font-normal))}
        }
        .label{display:block;}
      }
    }
    .confg;
    &:nth-child(3){}
  }
}

.theme-dark,
.theme-blue{
  .counter-six-wrap{
    .counter-item{
      &:nth-child(3){.bd(var(--auxilary-success_BD));.bgc(var(--auxilary-success_BG));
        .name{.bgc(var(--auxilary-success_BG_light));.bdri(var(--auxilary-success_BD_light)); .fc(var(--auxilary-success_FC_light));}
        .content,.content .numbers{.fc(var(--auxilary-success_FC)); }
      }
    }
  }
}
.theme-green{
  .counter-six-wrap{
    .counter-item{
      &:nth-child(3){.bd(var(--auxilary-info_BD));.bgc(var(--auxilary-info_BG));
        .name{.bgc(var(--auxilary-info_BG_light));.bdri(var(--auxilary-info_BD_light)); .fc(var(--auxilary-info_FC_light));}
        .content,.content .numbers{.fc(var(--auxilary-info_FC)); }
      }
    }
  }
}

</style>
